import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Card, Icon, message, Avatar } from 'antd';
import { getUid } from '../../utils/token';
import { formatMoment } from '../../utils/utils';
import defaultCover from '../../assets/default.png';
import defaultAvatar from '../../assets/avatar.png';
import styles from './Card.less';

const { Meta } = Card;

@connect()
export default class extends PureComponent {
  state = {
    img: '',
    avatar: '',
    likeStatus: 'like-o',
    likeNum: '0',
    favStatus: 'star-o',
  };

  componentDidMount() {
    const { picInfo } = this.props;
    let likeStatus = 'like-o';
    let favStatus = 'star-o';

    if (picInfo.isLiked) {
      likeStatus = 'like';
    }
    if (picInfo.isCollected) {
      favStatus = 'star';
    }

    this.setState({
      img: picInfo.imgUrl,
      avatar: picInfo.avatar,
      likeStatus,
      favStatus,
      likeNum: parseInt(picInfo.like, 10) === 0 ? '' : `${picInfo.like}`,
    });
  }

  handleLike = () => {
    const { picInfo } = this.props;
    const { likeStatus } = this.state;

    if (picInfo.isLiked || likeStatus === 'like') {
      message.error('你已经点过赞了！');
    } else {
      const { dispatch } = this.props;
      dispatch({
        type: 'picture/like',
        payload: {
          params: {
            params: {
              uid: getUid(),
              pid: picInfo.id,
            },
          },
          onSuccess: () => {
            const { likeNum } = this.state;
            this.setState({
              likeStatus: 'like',
              likeNum: likeNum === '' ? 1 : parseInt(likeNum, 10) + 1,
            });
            message.success('点赞成功！');
          },
        },
      });
    }
  };

  handleAddToFavlist = pid => {
    const { dispatch, picInfo } = this.props;
    if (!picInfo.isCollected) {
      dispatch({
        type: 'picture/addToFavlist',
        payload: {
          params: {
            params: {
              pid,
            },
          },
          onSuccess: () => {
            this.setState({
              favStatus: 'star',
            });
            message.success('收藏成功！');
          },
        },
      });
    }
  };

  handleDetail = pid => {
    const { onDetail } = this.props;
    onDetail(pid);
  };

  handleUserIndex = uid => {
    const { onUserIndex } = this.props;
    onUserIndex(uid);
  };

  render() {
    const { picInfo } = this.props;
    const { img, avatar, likeStatus, likeNum, favStatus } = this.state;

    return (
      <Card
        className={styles.imgWrapper}
        cover={
          <img
            src={img}
            onError={() => this.setState({ img: defaultCover })}
            onClick={() => this.handleDetail(picInfo.id)}
            alt="cover"
          />
        }
      >
        <Meta
          avatar={
            <Avatar
              size="large"
              src={avatar}
              onError={() => this.setState({ avatar: defaultAvatar })}
              onClick={() => this.handleUserIndex(picInfo.uid)}
            />
          }
          title={picInfo.brife}
          description={formatMoment(moment(picInfo.updated_at), 'type4')}
        />
        <div className={styles.btnWrapper}>
          <Icon type={favStatus} onClick={() => this.handleAddToFavlist(picInfo.id)} />
          <div className={styles.likeWrapper}>
            <Icon type={likeStatus} onClick={this.handleLike} />
            <span className={styles.likeNum}>{likeNum}</span>
          </div>
        </div>
      </Card>
    );
  }
}
